<template>
  <div class="w-full h-full flex text-[#303133]">
    <div class="w-[30%] max-w-[440px] h-full bg-white/80">
      <SideBar v-model:camera="draggedCamera" v-model:isProcessing="isShowProcessing" />
    </div>
    <div class="flex-1 h-full p-6 flex flex-col scrollbarY">
      <div class="xl:mb-8 mb-3 text-sm font-bold flex justify-between items-center">
        <div>
          <span v-if="isShowProcessing">图像预处理</span>
          <div v-else class="flex items-center gap-2 cursor-pointer" @click="changeMainContent">
            <span class="icon-[weui--back-filled]"></span>
            <span>透视矫正</span>
          </div>
        </div>
        <a-button v-if="isShowProcessing && droppedCamera" type="primary" @click="changeMainContent"
          >全部应用</a-button
        >
        <a-button v-if="!isShowProcessing" type="primary" @click="saveCorrection">保存</a-button>
      </div>
      <div class="bg-white border border-[#EAEDF7] flex-1 rounded-lg">
        <template v-if="isShowProcessing">
          <ImagePreprocessing
            v-model:dragged-camera="draggedCamera"
            v-model:dropped-camera="droppedCamera"
            v-model:curCamera="curCamera"
          />
        </template>
        <template v-else>
          <PerspectiveCorrection ref="perspectiveCorrectionRef" :camera="curCamera" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import SideBar from './SideBar.vue'
import ImagePreprocessing from './MainArea/ImagePreprocessing.vue'
import PerspectiveCorrection from './MainArea/PerspectiveCorrection.vue'
import { useCameraStore } from '@renderer/stores/camera'

const draggedCamera = ref(null)
const droppedCamera = ref(null)
const curCamera = ref<any>(null)
const isShowProcessing = ref(true)
const changeMainContent = () => {
  isShowProcessing.value = !isShowProcessing.value
  // 切换到透视矫正页面时，确保curCamera有值
  if (!isShowProcessing.value && droppedCamera.value) {
    curCamera.value = droppedCamera.value
  }
}

const perspectiveCorrectionRef = ref()

const { processCameraImg } = useCameraStore()

const saveCorrection = () => {
  if (curCamera.value && perspectiveCorrectionRef.value) {
    // 获取校正后的图片
    const correctedImg = perspectiveCorrectionRef.value.getCorrectedImage()
    // console.log("🐯 ~ saveCorrection ~ correctedImg:", correctedImg)
    if (correctedImg) {
      processCameraImg(curCamera.value.id, correctedImg)
    }
  }
}
</script>

<style scoped></style>
